<script setup lang="ts">
import { provide, ref } from 'vue';
import HmButton from './components/HmButton.vue';
import SonCom from './components/SonCom.vue';
import HmNavbar from './components/HmNavbar.vue';

const myEveny = (age: number) => {
  console.log('子组件触发回调函数', age);
}
const getName = (name: string) => {
  console.log('子组件触发回调函数', name);
};

const totalCount = ref(100);
provide('totalCount', totalCount)
provide('updatatotalCount', (num: number) => {
  totalCount.value += num
})
const appTitle = ref('应用标题')
const leftClick = () => {
  alert('左侧按钮被点击');
}

</script>

<template>
  <HmNavbar v-bind:title="appTitle" @left-click-handler="leftClick">
    <button>按钮</button>
  </HmNavbar>
  <h1>App 根组件</h1>
  <SonCom :name="'小马'" :age="18" @my-eveny="myEveny" @get-name="getName($event)" />
  <SonCom :name="'小范'" :age="21" @my-eveny="myEveny" @get-name="getName" />
  <button @click="totalCount++">+</button>
  <HmButton :text="'登录'" />
  <HmButton :text="'注册'" />
  <HmButton />
</template>